<template>
  <div class="home">
    <div class="logo">视频裁判教学辅助系统</div>
    <div class="conten">
      <div class="left">
        <img src="@/assets/ind.png" alt="" />
      </div>
      <div class="left right">
        <ul>
          <li @click="clickxz(1)">
            <div class="iconfont el-icon-quxiaoxuzhi"></div>
            <div class="text">
              上 机 <br />
              须 知
            </div>
          </li>
          <li @click="clickxz(2)">
            <div class="iconfont el-icon-donghua"></div>
            <div class="text">示 意 <br />动 画</div>
          </li>
          <li @click="clickxz(3)">
            <div class="iconfont el-icon-kejian"></div>
            <div class="text">培 训 <br />课 件</div>
          </li>
          <li @click="clicopen()">
            <div class="iconfont el-icon--search"></div>
            <div class="text">服 务 <br />查 找</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      Copyright © 郑州三和视讯技术股份有限公司 &nbsp; 2011 - 2021
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      setInval: null,
    };
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#006669";
  },
  methods: {
    clickxz(val) {
      // this.$emit("changexz", val);
      // this.$store.commit("setFaceState",true)
      this.$router.push({
        name: "Xzhi",
        query: { status: val },
      });
      // this.$emit("change-home",val)
    },
    clicopen() {
      // window.open("//www.100sucai.com");
      // window.opener = null;  // 关闭当前页 ↓
      // window.open("", "_self");
      // window.close();
    },
  },
  destroyed() {
    this.setInval && clearInterval(this.setInval);
  },
};
</script>

<style scoped>
.home {
  text-align: center;
  color: #fcfcfc;
}
.logo {
  padding-left: 105px;
  background: url("../assets/logo2.png") no-repeat;
  background-size: 85px 85px;
  line-height: 85px;
  font-size: 40px;
  margin-bottom: 55px;
  text-align: left;
}
.left {
  float: left;
  width: 45%;
}
.right {
  width: 50%;
}
.left img {
  width: 50%;
  margin: 75px 0 0 55px;
}
li {
  float: left;
  width: 39%;
  box-sizing: border-box;
  padding: 25px 25px;
  background: #ffffff3d;
  margin: 20px 35px;
  border-radius: 10px;
  color: white;
}
/* li i{width: 45px;} */
/* li span{width: 45px;} */
li div {
  float: left;
  width: 50%;
}
li:nth-child(3) {
  color: #e1dc8a;
}
li:nth-child(4) {
  background: #027db3;
}
li .text {
  line-height: 50px;
  font-size: 35px;
  font-weight: bold;
}
.iconfont {
  font-size: 65px;
  height: 100px;
  line-height: 100px;
}
.footer::before {
  content: "";
  display: block;
  height: 135px;
  clear: both;
}
.footer {
  font-size: 18px;
}
</style>
